package icu.bughub.app.app.ui.components

import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.StrokeCap
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.unit.dp

@Composable
fun ChartView(points: List<Float> = listOf(0f, 2f, 6f, 9.5f, 10f, 15f, 5f)) {
    // TODO: 实现图表
    // 可以使用 Canvas 绘制图表，也可以使用第三方库，如 MPAndroidChart 等
    // 这里只是一个示例，你可以根据自己的需求进行修改

    //画布宽度 = 屏幕宽度 - 两侧padding
    // 屏幕宽度 = LocalConfiguration.current.screenWidthDp
    // 两侧padding = 16dp
    var canvasWidth: Int = LocalConfiguration.current.screenWidthDp - 8 * 2
    //每一行的高度
    val heightForRow: Int = 24

    //总行数
    val countOfRow: Int = 5

    //小圆圈半径
    var circleRadius: Float = 2.5f

    val perY: Int = 8 // 24 * 5 / 15 = 8  代表每8dp为一个Y轴坐标  每8dp大于1积分，也就是每一行3积分

    //画布高度 = 行高 * 行数 + 小圆圈半径 * 2
    val canvasHeight = heightForRow * countOfRow + circleRadius * 2

    // 7平分的宽度
    val averageOfWidth = canvasWidth / 7

    Canvas(
        modifier = Modifier
            .size(width = canvasWidth.dp, height = canvasHeight.dp)
    ) {
        // 画背景线
        for (index in 0..countOfRow) {
            //行高 * index + 小圆圈半径 = 起始点Y坐标
            val y = (heightForRow * index + circleRadius).dp.toPx()
            drawLine(
                color = Color(0xffeeeeee),
                start = Offset(0f, y), // 起始点
                end = Offset(
                    canvasWidth.dp.toPx(),
                    y
                )  // 结束点
            )
        }

        //画圆圈，画折线
        points.forEachIndexed { index, point ->
            // 圆圈的X坐标 7等分的宽度 * index + 每一行的平均宽度 / 2
            val x = (averageOfWidth * index + averageOfWidth / 2).dp.toPx() // 圆圈的X坐标
            // 圆圈的Y坐标 = 行高* 行数 - 积分 * 每一积分代表的dp值 - 小圆圈半径
            val y = (heightForRow * countOfRow - point * perY + circleRadius).dp.toPx()
            val circleCenter = Offset(x, y)
            // 画圆圈
            drawCircle(
                color = Color(0xFF149EE7),
                radius = circleRadius.dp.toPx(),
                center = circleCenter,      // 圆圈的Y坐标
                //空心
                style = Stroke(
                    width = 5f,
                    cap = StrokeCap.Round
                )
            )
            // 画折线
            if (index < points.size - 1) {
                //下一个圆点的坐标 也就是circleCenter的计算方法中 index + 1 即可
                val nextPointOffset = Offset(
                    (averageOfWidth * (index + 1) + averageOfWidth / 2).dp.toPx(),
                    (heightForRow * countOfRow - points[index + 1] * perY + circleRadius).dp.toPx()
                )
                // 画折线
                drawLine(
                    color = Color(0xFF149EE7),
                    start = circleCenter, // 起始点 也就是圆点的位置
                    end = nextPointOffset,  // 结束点
                    strokeWidth = 3f
                )

            }
        }
    }

}